<script>
import XuanHeader from "@/components/headerfooter/XuanHeader.vue"; // 页头
import XuanFooter from "@/components/headerfooter/XuanFooter.vue"; // 页脚

export default {
  components: {
    XuanHeader, // 页头
    XuanFooter, // 页脚
  },
  el: "app",
  data() {
    return {};
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>


<template>
  <div class="vue">

    <div class="header">
      <XuanHeader />
    </div>

    <div class="interface">
      <router-view v-slot="{ Component }">
        <transition
          name="fade"
          mode="out-in"
        >
          <component :is="Component" />
        </transition>
      </router-view>
    </div>

    <div class="footer">
      <XuanFooter />
    </div>

    <div>
      <el-backtop
        class="mouse"
        :right="40"
        :bottom="40"
        visibility-height="100"
      />
    </div>

  </div>
</template>


<style scoped lang="scss">
.vue {
  .header {
  }

  .interface {
    min-height: 100vh;
    padding: 80px 0px 80px 0px;
    background-color: rgb(247, 249, 255);
  }

  .footer {
  }

  .mouse {
    z-index: 9999;
    border-radius: 50px;
  }
}
</style>
